<template>
	<span class="icon-sprite icon-home"></span>
	<span class="icon-sprite icon-user"></span>
	<span class="icon-sprite icon-settings"></span>
</template>

<style lang="less" scoped>
/* 定义精灵图背景 */
.icon-sprite {
	background-image: url('@/static/goodsTypeAll.png');
	background-repeat: no-repeat;
	display: inline-block;
	height: 100px;
	/* 精灵图中图标的高度 */
	width: 100px;
	/* 精灵图中图标的宽度 */
	border: 1px black solid;
}

/* 定义每个图标的背景位置 */
.icon-home {
	background-position: -28px -8px;
	/* 左上角 */
}

.icon-user {
	background-position: -176px -8px;
	/* 左起第二个图标位置 */
}

.icon-settings {
	background-position: -325px -8px;
	/* 左起第三个图标位置 */
}
</style>